<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>mix</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="Colorpicker/js/colpick.js" type="text/javascript"></script>
    <link rel="stylesheet" href="Colorpicker/css/colpick.css" type="text/css" />
    <script
        src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
    <link rel='stylesheet'
        href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css'
        type='text/css' />

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            margin: 0 auto;
            width: 246.73px;
            height: 534px;

            border-radius: 25px;
            box-shadow: 10px 10px 5px #888888;
        }

        .center-in-center {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>

    <style>
        #menu {
            position: absolute;
            background: #fff;
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
        }

        .map-overlay {
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 300px;
            height: 100%;
            top: 0;
            left: 0;
            padding: 10px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.10);
        }

        .map-overlay2 {
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 300px;
            height: 35%;
            bottom: 10px;
            right: 10px;
            padding: 10px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.10);
            border-radius: 3px
        }


        .map-overlay .map-overlay-inner {
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
            border: none;
            padding: 10px;
            margin-bottom: 10px;
        }

        .map-overlay-inner fieldset {
            border: none;
            padding: 0;
            margin: 0 0 10px;
        }

        .map-overlay-inner fieldset:last-child {
            margin: 0;
        }

        .map-overlay-inner select {
            width: 90%;
        }

        .map-overlay-inner label {
            display: block;
            font-weight: bold;
            margin: 0 0 5px;
        }

        .map-overlay2 img {
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
        .map-overlay-inner.geocoder {
            position: absolute;
            z-index: 1;
            width: 70%;
            left: 30%;
            margin-left: -25%;
        }

        .mapboxgl-ctrl-geocoder {
            min-width: 100%;
        }
    </style>


    <div id='map' class='center-in-center'></div>

    <div class='map-overlay top'>
        <div class='map-overlay-inner'>
            <fieldset>
                <label>Map Location</label>
                <div id='geocoder' class='geocoder'></div>
            </fieldset>

            <fieldset>
                <label>Select BaseMap</label>
                <select id='basemap' name='basemap' onchange='switchBaseMap(this.value)'>
                    <option value='dark-v10'>dark</option>
                    <option value='streets-v11'>streets</option>
                    <option value='light-v10'>light</option>
                    <option value='satellite-v9'>satellite</option>
                </select>
            </fieldset>
            <fieldset>
                <label for='custom_url'>Custom BaseMap：</label>
                url：<input id='custom_url' typr='url' style="height:13px"><br>
                token:<input id='custom_token' typr='url' style="height:13px">
                <input id='custom_submit' type='button' value='submit'>
            </fieldset>
            <fieldset>
                <label>Select layer</label>
                <select id='layer' name='layer'>
                    <option value='water'>Water</option>
                    <option value='building'>Buildings</option>
                    <option value='hillshade'>road</option>
                </select>
                <button id='picker'>Open ColorPicker</button>
            </fieldset>
            <fieldset>
                <label>Select PhoneType</label>
                <select id='phoneetype' name='phoneetype' onchange='switchResolution(this.value)'>
                    <option value="1125x2436">iPhone X(1125x2436)</option>
                    <option value="1080x1920">iPone 6+,7+,8+(1080x1920)</option>
                    <option value="750x1334">iPhone 6,7,8(750x1334)</option>
                    <option value="640x1136">iPhone SE,5(640x1136)</option>
                    <option value="1440x2560">Google Pixel 2 XL(1440x2880)</option>
                    <option value="1440x2560">HTC U Ultra(1440x2560)</option>
                    <option value="1080x1920">Huawei P10(1080x1920)</option>
                    <option value="1440x2880">LG G6(1440x2880)</option>
                    <option value="1080x1920">OnePlus 5(1080x1920)</option>
                    <option value="1440x2960">Samsung Galaxy S8,S8+,S9,S9+(1440x2960)</option>
                    <option value="1080x1920">Xiaomi Mi 6(1080x1920)</option>
                </select>
            </fieldset>
            <fieldset>
                <label>Select Your Picture</label>
                <input type="file" id="input" onchange="handleFiles(this.files)">
            </fieldset>
            <fieldset>
                <label> </label>
                <input type="button" value="Beautify by Meitu" onclick="window.location.href='meitu_m3.html'">
            </fieldset>
        </div>
    </div>

    <div class="map-overlay2" id="backimg">

    </div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGF0cmlzdGFuIiwiYSI6ImNrbWVtOTh0bzJ3aHIycWtuZnRnM2YxeW0ifQ.4rua_9rcjvfORJdLI_1JQw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [-79.4512, 43.6568],
            zoom: 13
        });

        //位置搜索
        var geocoder = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        });
        document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

        //更改图层颜色
        var layer = document.getElementById('layer');
        $('#picker').colpick({
            layout: 'hex',
            submit: 0,
            onChange: function (hsb, hex, rgb, el, bySetColor) {
                //el元素，在其上调用colorpicker（）的父元素。使用它可以在更改时修改此父元素（请参见下面的第一个示例）。
                //$(el).css('border-color','#'+hex);
                // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
                //if(!bySetColor) $(el).val(hex);

                map.setPaintProperty(layer.value, 'fill-color', '#' + hex);
            }

        }).keyup(function () { $(this).colpickSetColor(this.value) });

        //更改底图
        function switchBaseMap(value) {
            map.setStyle('mapbox://styles/mapbox/' + value);
        };
        //自定义底图
        document.getElementById('custom_submit').onclick = function () {
            map.setStyle(document.getElementById('custom_url').value);
            map.token = document.getElementById('custom_token').value;
        };

        //选择手机型号
        function switchResolution(pt) {
            var aMap = document.getElementById('map');
            if (pt == '1125x2436') {
                aMap.style['height'] = '534px';
                aMap.style['width'] = '246.73px';
            }
            else if (pt == '1080x1920') {
                aMap.style['height'] = '482.67px';
                aMap.style['width'] = '271.95px';
            }
            else if (pt == '750x1334') {
                aMap.style['height'] = '425.03px';
                aMap.style['width'] = '238.63px';
            }
            else if (pt == '640x1136') {
                aMap.style['height'] = '405.22px';
                aMap.style['width'] = '228.72px';
            }
            else if (pt == '1440x2880') {
                aMap.style['height'] = '577.22px';
                aMap.style['width'] = '289.06px';
            }
            else if (pt == '1440x2560') {
                aMap.style['height'] = '545.7px';
                aMap.style['width'] = '307.07px';
            }
            else if (pt == '1440x2960') {
                aMap.style['height'] = '585.32px';
                aMap.style['width'] = '284.56px';
            };
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/dark-v10',
                center: [-79.4512, 43.6568],
                zoom: 13
            });
        };

        //选择文件
        function handleFiles(files) {
            var preview = document.getElementById('backimg');
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /^image\//;

                if (!imageType.test(file.type)) {
                    continue;
                }

                var myimg = document.createElement("img");
                myimg.classList.add("obj");
                myimg.file = file;
                // 假设 "preview" 是将要展示图片的 div
                preview.appendChild(myimg);

                var reader = new FileReader();
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    };
                })(myimg);
                reader.readAsDataURL(file);
            }

        };

    </script>

</body>

</html>